<template>
	<view class="wrap" style="padding-top:50rpx;">
	<view class="reg-text" style="color:#000000;font-weight:bold;">请输入验证码</view>
		<view class="remind-text">验证码已通过短信发送至+86 {{phoneNo}}</view>
		<u-message-input mode="box"   @finish="finish" :maxlength="6" :breathe="true"></u-message-input>
		<view class="remind-text">
			 <view v-if="!codeDisabled">{{loadTime}}秒后可重新获取验证码<br> </view>
			<!-- <view class="button" :disabled="getCodeDisabled" @click="getCode()"><text>重新获取验证码</text></view> -->
<!-- 			<u-verification-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode"
				@change="codeChange" :startText="startText" :changeText="changeText" :endText="endText">
			</u-verification-code>  -->
			<!-- <u-button v-if="codeDisabled"   class="button" @tap="getCode">{{tips}}</u-button> -->
          <button class="button"  v-if="codeDisabled"  @click="getCode()"><text>重新获取验证码</text></button>
		</view>
	</view>
</template>
<script>
  import { publicBar, selfBar}  from '@/js_sdk/tabbar.js'
	export default {
		data() {
			return {
				phoneNo: '',
        password: '',
				verificationCode:'',
				tips: '',
				seconds: 60,
				refCode: null,
				startText: '重新获取验证码',
				changeText: 'X秒重新获取',
				endText: '重新获取验证码',
				loadTime:2,
				codeDisabled:false,
				timer:'',
        cid: '',
			};
		},
		onLoad(option) {
			this.phoneNo = option.phoneNo
		},
		created() {
			this.timer = setInterval(this.getTime, 1000)
		},
		watch:{
		},
		methods: {
			getTime () {
			         this.loadTime--
			         if (this.loadTime === 0) {
			           clearInterval(this.timer)
					   this.codeDisabled = true
			         }
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
        this.codeDisabled =! this.codeDisabled
        this.loadTime =60
        this.timer = setInterval(this.getTime, 1000)
					// uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					
					// 通知验证码组件内部开始倒计时
					this.$u.api.sendCode({
							phoneNo: this.phoneNo,
              codeType: '0',
						})
						.then(res => {
							if (res.code == '200') {
               this.$u.toast('验证码已发送');
							} else {
								this.$u.toast(res.msg);
							}
						});

		
			},
			finish(e){
        plus.push.getClientInfoAsync((info) => {
                this.cid = info["clientid"];
                 
                 this.$u.api.login({
                   username: this.phoneNo,
                 	phoneNo: this.phoneNo,
                   password: this.password,
                   loginType: '0',
                    validCode: e,
                     cid :  this.cid
                 })
                 .then(res => {
                 	if(res.msg){
                 		this.$u.toast(res.msg);
                 	}
                 
                   if(res.studentArray==''){
                       this.$u.vuex('vuex_teacherId',res.teacherId)
              this.$u.vuex('vuex_tabbar',selfBar)
              }
              else{
                  this.$u.vuex('vuex_studentArray',res.studentArray)
                  this.$u.vuex('vuex_tabbar',publicBar)
              }
                   
                   
                  
                 	if (res.code == '200') {
                 		setTimeout(() => {
                 			uni.reLaunch({
                 				url:'/pages/sys/msg/index'
                 			});
                 		}, 500);
                 	}
                 });
                 
                 
        });

        
        
			}
		}
	};
</script>
<style lang="scss">
	@import 'index.scss';

	.remind-text {
		padding: 30rpx 70rpx;
		color: #666666;

		em {
			font-weight: bold;
			color: #242424;
			font-style: normal;
			margin: 0 5px;
		}
	}
</style>
